<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>饼图</title>
    <style>
      #box {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border: 1px #ccc solid;
      }
    </style>
  </head>
  <body>
    <canvas id="box" width="600" height="600"></canvas>
  </body>
</html>
<script>
  const dom = document.querySelector("#box");
  const context = dom.getContext("2d");
  // 固定中心点
  context.save();
  context.translate(300, 300);
  context.save();
  //   圆形1
  context.beginPath();
  context.lineWidth = 5;
  context.arc(0, 0, 200, (Math.PI / 180) * 0, (Math.PI / 180) * 360);
  context.stroke();
  //   扇形1
  context.beginPath();
  //   context.strokeStyle = "#f00";
  context.moveTo(0, 0);
  context.fillStyle = "#f00";
  context.arc(0, 0, 200, (Math.PI / 180) * 0, (Math.PI / 60) * 60, false);
  context.fill();
  context.stroke();

  context.beginPath();
  //   context.strokeStyle = "#f00";
  context.moveTo(0, 0);
  context.fillStyle = "#00f";
  context.arc(0, 0, 200, (Math.PI / 180) * 60, (Math.PI / 180) * 180, false);
  context.fill();
  context.stroke();

  context.beginPath();
  context.moveTo(0, 0);
  context.fillStyle = "#ff0";
  context.arc(0, 0, 200, (Math.PI / 180) * 180, (Math.PI / 180) * 0, false);
  context.fill();

  context.stroke();
</script>
